<template>
  <div AbortSignal-loading="loading" element-loading-text="loading..." v-loading="loading" style="height: 100%;background-image:url('../../../static/img/back.png');">
      <div class="header">
        <a @click="backMethod">
          <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
        </a>
        <h3 style="color: white;">添加新地址</h3>
      </div>
      <main>
        <el-form label-position="right" label-width="25%" :model="addressFrom">
          <el-form-item label="收货人姓名" prop="consigneeName" :rules="[
                { required: true, message: '请输入收货人姓名', trigger: 'blur' },
              ]">
            <el-input v-model="addressFrom.consigneeName" maxlength="10" show-word-limit placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" prop="phoneNum" :rules="[
                { required: true, message: '请输入收货人电话', trigger: 'blur' },
              ]">
            <el-input v-model="addressFrom.phoneNum" maxlength="11" show-word-limit placeholder="请输入收货人电话"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="address" :rules="[
                { required: true, message: '请输入收货地址', trigger: 'blur' },
              ]">
            <el-input v-model="addressFrom.address"
            type="textarea" placeholder="请输入内容" :autosize="{ minRows: 2, maxRows: 2}" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <div style="width: 100%;display: flex;justify-content: space-around;box-sizing: border-box;padding: 0 60px;">
            <el-button type="info" @click="clearData">清空</el-button>
            <el-button type="primary" @click="addNewAddress">添加</el-button>
          </div>
        </el-form>
      </main>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        addressFrom:{
          consigneeName:"",
          phoneNum:"",
          address:"",
          userCode:"",
        },
        loading:false,
      }
    },
    methods:{
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null){
          this.$router.push({
            path: lastPage
          });
        }{
          this.$router.push({
            path: '/addressManage'
          });
        }
      },

      //清空表单数据
      clearData(){
        this.addressFrom={
          consigneeName:"",
          phoneNum:"",
          address:"",
          userCode:"",
        }
      },

      addNewAddress(){
        this.loading = true;
        var self = this;
        var user = JSON.parse(sessionStorage.getItem("visitor"));
        if(user != null){
          this.addressFrom.userCode = user.userCode;
          this.$http.post('/api/CakeShop/MemberInfo/address/addConsignee',self.addressFrom)
          .then((res)=>{
            if(res.data.code == 200){
              self.$message({
                message: res.data.msg,
                type: 'success',
                onClose: function() {
                  self.$router.push({
                    path:'/addressManage'
                  })
                }
              });
            }else{
              self.$message({
                  duration: 1500,
                  message: res.data.msg,
                  type: "error",
                  onClose: function() {
                    self.loading = false;
                  },
                });
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .header{
    display: flex;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
  }
  main{
    display: flex;
    box-sizing: border-box;
    padding: 40px 14px 0;
  }
  main .el-form{
    width: 100%;
  }
</style>
